////
/// Datepicker
/// A calendar widget
/// @group datepicker
////

/// The width of the datepicker.
$am-datepicker-width: am-unit(35) !default;
/// The shadow cast below the datepicker.
$am-datepicker-shadow: (0 1px 2px rgba(#000, 0.25), 0 -1px 1px rgba(#000, 0.12)) !default;
/// The border radius of the picker.
$am-datepicker-border-radius: 2px !default;
/// The size of an individual cell in the calendar. Square.
$am-datepicker-cell-size: am-unit(4) !default;

@mixin am-datepicker {
  background: white;
  border-radius: $am-datepicker-border-radius;
  box-shadow: $am-datepicker-shadow;
  display: none;
  padding: 0 am-unit(1.5) am-unit(1);
  width: $am-datepicker-width;
}

@mixin am-datepicker-header {
  line-height: $am-datepicker-cell-size;
  padding: am-unit(1) 0 am-unit(0.5);
  position: relative;
  text-align: center;
}

@mixin am-datepicker-title {
  @include am-font-size(14px);
  font-weight: $am-font-weight-semi-bold;
}

@mixin am-datepicker-icon {
  &:before {
    @include am-font-size(am-unit(2));
    display: inline-block;
    height: $am-datepicker-cell-size;
    width: $am-datepicker-cell-size;
  }
}

@mixin am-datepicker-prev {
  cursor: pointer;
  float: left;

  &:before {
    @include am-datepicker-icon;
    content: "‹";
  }
}

@mixin am-datepicker-next {
  cursor: pointer;
  float: right;

  &:before {
    @include am-datepicker-icon;
    content: "›";
  }
}

@mixin am-datepicker-calendar {
  @include am-font-size(12px);
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}

@mixin am-datepicker-calendar-heading {
  @include am-color(secondary-text);
  font-weight: $am-font-weight-medium;
  padding: 0 0 am-type-unit(1);
}

@mixin am-datepicker-calendar-day {
  height: $am-datepicker-cell-size;
  font-weight: $am-font-weight-medium;
  line-height: $am-datepicker-cell-size;
  padding: 0;
  width: $am-datepicker-cell-size;
}

@mixin am-datepicker-calendar-day-disabled {
  opacity: 0;
}

@mixin am-datepicker-calendar-day-link {
  @include am-link(text);
  border-radius: 50%;
  display: block;
  height: inherit;
  margin: 0 auto;
  width: inherit;
}

@mixin am-datepicker-calendar-day-link-focus {
  @include am-color(primary);
  text-decoration: none;
}

@mixin am-datepicker-calendar-day-link-current {
  @include am-fill(primary);
  @include am-color(white);
}
